<!DOCTYPE html>
<html lang="en">
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <title>个人介绍</title>
            <style>
                  * {
                        box-sizing: border-box;
                  }

                  .card {
                        background-color: white;
                        padding: 10px;
                        margin-top: 10px;
                  }

                  .leftcolumn {
                  float: left;
                  width: 75%;
                 }

                 .rightcolumn {
                  float: right;
                  width: 25%;
                  background-color: #f1f1f1;
                  padding: 10px;
                 }

                 .fakeimg {
                  background-color: #aaa;
                 }

                 .row:after{
                  content: "";
                  display: table;
                  clear: both;
                 }

                 @media screen and (max-width: 700px){
                  .leftcolumn,.rightcolumn {
                        width: 100%;
                        padding: 0;
                  }
                 }

            </style>
      </head>
      <body>
            <div class="row">
                  <div class="leftcolumn">
                        <div class="card">
                              <h2>前端技术栈</h2>
                              <div style="height: 200px;"><img src="imgs/web.png" width="50%" height="100%"></div>
                              <p>前端技术栈掌握：html+css+javascript+jquery+bootstrap.js+vue.js+react.js+node.js+element-UI+AntDesign+uniapp</p>
                              <p>可以实现网站的快速搭建，包含宣传网站、办公网站；可以完成微信小程序，手机APP应用的开发。</p>
                        </div>
                        <div class="card">
                              <h2>后端技术栈</h2>
                              <div style="height: 200px;"><img src="imgs/service.png" width="20%" height="100%"></div>
                              <p>后端技术栈掌握：springboot+mavan+sql+mysql+oracle+mybatis+mybatis-plus+python+dinago+fastapi+fask+rabittmq+redis</p>
                              <p>可以实现后端服务及微服务搭建开发，数据库维护及数据分析展示，前后端联调</p>
                        </div>
                  </div>
                  <div class="rightcolumn">
                        <div class="card">
                              <h2>微信联系我</h2>
                              <div><img src="imgs/weixin.jpg" width="200px" height="260px"></div>
                        </div>
                        <div class="card">
                              <h2>QQ联系我</h2>
                              <div><img src="imgs/qq.jpg" width="200px" height="280px"></div>
                        </div>
                  </div>
            </div>
      </body>
</html>